<template>
  <div class="singer-list">
    <ul class="singer-list-ul">
      <li v-for="item in singerList" :key="item.id" class="singer-list-li d-flex ai-center pl-4 py-3">
        <img v-lazy="item.img1v1Url" width="50%" @click="toSingerDetail(item.id)" @load="imgLoadEnd">
        <div class="singer-list-name pl-3">{{item.name}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      singerList: Array
    },
    data() {
      return {

      }
    },
    methods: {
      toSingerDetail(id) {
        this.$emit('to-singer-detail', id)
      },
      imgLoadEnd(){
        this.$emit('img-load-end')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .singer-list {
    padding-bottom: 2.5rem;
    .singer-list-ul {
      display: flex;
      flex-wrap: wrap;
      .singer-list-li {
        width: 50%;
        flex-wrap: wrap;
        .singer-list-name {
          width: 50%;
        }
      }
    }
  }
</style>
